<template>
    <div class="modify">
        <div class="item">
            <span>昵称：</span>
            <el-input v-model="name" placeholder="请输入昵称，不能为空"></el-input>
        </div>
        <div class="item">
            <span>密码：</span>
            <el-input v-model="password" placeholder="请输入密码,不填不修改密码" show-password type="password"></el-input>
        </div>
        <div class="item">
            <span>性别：</span>
            <el-select v-model="sex" placeholder="请选择性别">
                <el-option label="男" :value="1"></el-option>
                <el-option label="女" :value="0"></el-option>
                <el-option label="不显示" :value="-1"></el-option>
            </el-select>
        </div>
        <div class="item">
            <span>年龄：</span>
            <el-select v-model="age" placeholder="请选择年龄" filterable>
                <el-option v-for="item in 100" :key="item" :label="item+'岁'" :value="item">
                </el-option>
            </el-select>
        </div>
        <div class="item">
            <span>个性签名：</span>
            <el-input v-model="sign" type="textarea" placeholder="请输入个性签名" :rows="4" resize="none"></el-input>
        </div>

        <div class="item">
            <span>
                <el-button type="primary" @click="saveClick">保存</el-button>
            </span>
        </div>
    </div>
</template>

<script type="text/javascript">

export default {
    name: 'modifyPsd-vue',
    components: {
    },

    props: {},

    data() {
        return {
            // type: '',
            // data: "",
            // title: '',
            name: '',
            sex: "",
            age: "",
            sign: "",
            password: "",
        }
    },

    watch: {},

    created() {
        this.getData();
    },

    activated() {
        this.getData();
    },

    deactivated() {
        this.destoryData();
    },
    beforeDestroy() {
        this.destoryData();
    },
    mounted() {
    },

    methods: {
        destoryData() {
            this.name = '';
            this.age = '';
            this.sex = '';
            this.sign = '';
        },
        getData() {
            this.name = localStorage.getItem('name');
            this.age = Number(localStorage.getItem('age')) || '';
            this.sex = Number(localStorage.getItem('sex'));
            this.sign = localStorage.getItem('sign') || '';
            console.log(this.sign)
        },
        saveClick() {
            if (!this.name) return this.$msg.warning({
                message: "昵称不能为空",
                duration: 500,
                showClose: true,
            })
            let data = {
                name: this.name,
                age: this.age,
                sex: this.sex,
                sign: this.sign,
            }
            if (this.password) {
                data = {
                    name: this.name,
                    age: this.age,
                    sex: this.sex,
                    sign: this.sign,
                    password: this.password
                }
            }
            this.$http.post('/modifyUserInfo', data).then((res) => {
                localStorage.setItem('name', res.name);
                localStorage.setItem('age', res.age);
                localStorage.setItem('sex', res.sex);
                localStorage.setItem('sign', res.sign);
                localStorage.setItem('password', this.password);
                this.$msg.success({
                    message: "保存成功",
                    duration: 500,
                    showClose: true,
                })

                setTimeout(() => {
                    this.$router.push({
                        path: '/my',
                        query: {
                            name: "我的"
                        }
                    })
                }, 1000);
            })

        },
        // MDFSex() { },
        // MDFAge() { },
        // MDFSign() { },
        // // 修改昵称
        // MDFName() {
        //     if (this.data == localStorage.getItem('name')) return
        //     this.$http.get('/modyfyname', {
        //         name: this.data
        //     }).then((res) => {
        //         localStorage.setItem('name', res.name);
        //         this.$msg.success({
        //             message: "保存成功修改昵称为：" + res.name,
        //             duration: 500,
        //             showClose: true,
        //         })
        //         this.data = res.name;
        //         setTimeout(() => {
        //             this.$router.push({
        //                 path: '/my',
        //                 query: {
        //                     name: "我的"
        //                 }
        //             })
        //         }, 1000);
        //     })
        // },
        // // 修改密码
        // MDFPassword() {
        //     this.$http.get('/modifyPwd', {
        //         password: this.data
        //     }).then(() => {
        //         this.$msg.success({
        //             message: "修改密码成功,请重新登录,密码为" + this.data,
        //             showClose: true,
        //             duration: 1500
        //         })
        //         setTimeout(() => {
        //             // 退出重新登录
        //             this.$router.push('/login')
        //             localStorage.clear();
        //         }, 1000);
        //     })
        // }
    }
}
</script>

<style lang="less" scoped>
.modify {
    padding-top: 20px;
    .item {
        display: flex;
        margin-top: 20px;
        span {
            width: 80px;
            text-align: left;
            margin-left: 20px;
        }
        .el-input,
        .el-select,
        .el-textarea {
            width: 60%;
        }
    }
}
</style>